<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model应用与其他表单元素</title>
</head>

<body>
  <!-- 
  常见的表单元素都可以用v-model绑定关联 -> 快速获取或者设置表单元素的值
  它会根据空间类型自动选取正确的方法来更新元素
  输入框 input:text
  文本域：textarea
  复选框：unput:checkbox
  下拉列表：select
  
  -->
  <div id='app'>
    <h3>某某学习网</h3>
    姓名: <input type="text" v-model="username"> <br><br>
    是否单身: <input type="checkbox" v-model="isSingle"> <br><br>
    <!-- 
    1.name: 给单选框加上name属性，可以分组 -》同一组互相会互斥
    2.value: 给单选框加上value属性，用于提交给后台的数据
    结合Vue使用 -》 v-model
    
    -->
    性别：<input v-model="gender" type="radio" name="gender" value="1">男
    <input v-model="gender" type="radio" name="gender" value="0">女 <br><br>
    <!-- 
    option 需要设置value值，提交给后台
    select 的value值，关联了选中的option 的value值
    结合Vue使用 -》 v-model
    
    -->
    所在城市：<select v-model="cityId">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">深圳</option>
      <option value="104">南京</option>
    </select>
    <br><br>
    自我描述：<br><textarea v-model="desc"></textarea>
    <br><br>
    <button>提交</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: false,
        gender: '1',
        cityId: '101',
        desc: ''

      }
    })
  </script>
</body>

</html>